<template>
	<div class="wrapper">
		<div class="back-icon" @click="goBack()">
			<i class="fa fa-arrow-left"></i>
		</div>
		<header>
			<p>请选择您的身份</p>
		</header>
		<div class="button-identity">
			<button @click="selectIdentity('consumer')">消费者</button>
			<button @click="selectIdentity('merchant')">商家</button>
			
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import { ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';

export default {
	name: 'PreRegister',
	setup() {
		const router = useRouter();
		const currentInstance = getCurrentInstance();

		const goBack = () => {
			router.go(-1);
		};

		const selectIdentity = (role) => {
			if (role === 'consumer') {
				router.push({ path: '/register' });
			} else if (role === 'merchant') {
				router.push({ path: '/mcregister' });
			}
		};

		return {
			selectIdentity,
			goBack
		};
	},
	components: {
		Footer
	}
};
</script>

<style scoped>
/*********************总容器******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}
	/*********** 回退按钮 ***********/
	.wrapper .back-icon{
		width: 12vw;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/**********************header*******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		align-items: center;
		justify-content: center;
	}


.button-identity {
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-top: 20vw;
}

.button-identity button {
	width: 40vw;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;
	border: none;
	outline: none;
	margin: 2vw;
}
</style>